// 碳交易规模趋势监测结果展示
import React, { Children, useEffect, useState } from 'react';
import { connect } from 'dva';
import * as echarts from 'echarts';
import './carbonTradingScaleTrend.less';
import { getCarbonTradingScaleTrend } from '@/services/carbon'

const carbonTradingScaleTrend = (props) => {

  const [seriesNationwide, setSeriesNationwide] = useState([])

  useEffect(() => {
    const fetchData = async () => {
      try {
        // 获取接口数据并赋值
        const res = await getCarbonTradingScaleTrend()
        if (res.code === 200) {
          setSeriesNationwide(res.data.series)
        }
      } catch (error) {
        console.error(error);
      }
    };
    fetchData()
  }, [])

  useEffect(() => {
    if (seriesNationwide.length === 0) {
      return
    }
    let centerChart = echarts.init(document.getElementById("trendCenterChart"));
    let centerSeries = []
    let centerXdata = []
    seriesNationwide.forEach((item, index) => {
      if (item.name === '企业交易量') {
        centerSeries.push({
          name: item.name,
          type: 'bar',
          yAxisIndex: 0,
          data: item.data,
          barWidth: '30px',
          itemStyle: {
            color: '#5178FF'
          },
        })
      } else if (item.name === '企业交易需求') {
        centerSeries.push({
          name: item.name,
          type: 'bar',
          yAxisIndex: 0,
          data: item.data,
          barWidth: '30px',
          itemStyle: {
            color: '#25B6B6'
          },
        })
      } else if (item.name === '企业交易均价') {
        centerSeries.push({
          name: item.name,
          type: 'line',
          yAxisIndex: 1,
          data: item.data,
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: {
            color: '#25B6B6'
          },
          lineStyle: {
            color: '#25B6B6',
            width: 3  // 设置折线的粗细为3像素
          }
        })
      }
      if (index === 0) {
        centerXdata.push({
          data: item.xAxis
        })
      } else {
        centerXdata.push({
          data: item.xAxis,
          show: false
        })
      }
    })
    // 绘制图表
    centerChart.setOption({
      tooltip: {
        backgroundColor: '#fff',
        borderColor: '#fff',  // 设置边框颜色
        borderWidth: 5,  // 设置边框宽度
        padding: [10, 10],  // 内边距，分别表示上下和左右间距
        // 可以根据需要设置其他样式，比如字体颜色、边框等
        textStyle: {
          color: '#000'  // 提示框文字颜色
        },
        // 自定义提示框内容
        formatter: function (params) {
          let tooltipContent = params[0].axisValue + '<br/>'; // 添加当前 x 轴内容
          params.forEach(function (item) {
            let unit = item.seriesName === '企业交易均价' ? '元/吨CO2' : '万吨CO2' // 根据系列下标判断单位类型
            tooltipContent += `${item.seriesName}:<span style="font-weight: bold;margin-left: 20px">${item.value}</span><span style="color: fff;margin-left: 20px">${unit}</span><br/>`;
          });
          return tooltipContent;
        },
        trigger: 'axis',
        axisPointer: {
          type: 'line',  // 设置为线型，可以是 'line' | 'shadow' | 'cross'
          lineStyle: {
            color: '#000',  // 参考线的颜色
            width: 2,  // 参考线的宽度
            type: 'dashed'  // 参考线的类型，可以是 'solid' | 'dashed' | 'dotted'
          }
        }
      },
      xAxis: centerXdata,
      yAxis: [
        {
          type: 'value',
          name: '单位：万吨CO2',
          position: 'left',
          axisLabel: {
            formatter: '{value}'
          },
          splitLine: {
            show: true,  // 显示分隔线
            lineStyle: {
              type: 'dashed',  // 设置为虚线
              width: 3,  // 虚线宽度
              color: '#f7f7f7'  // 虚线颜色
            }
          },
        },
        {
          type: 'value',
          name: '单位：元/吨CO2',
          position: 'right',
          axisLabel: {
            formatter: '{value}'
          },
          splitLine: {
            show: false,  // 显示分隔线
            lineStyle: {
              type: 'dashed',  // 设置为虚线
              width: 3,  // 虚线宽度
              color: '#f7f7f7'  // 虚线颜色
            }
          },
        },
      ],
      grid: {
        containLabel: true,  // 包含刻度标签在内
        left: 15,  // 调整图表左边距
        right: 25,  // 调整图表右边距
        top: 30,  // 调整图表上边距
        bottom: 30,  // 调整图表下边距
        borderColor: '#ccc',  // 网格边框颜色
        borderWidth: 1,  // 网格边框宽度
        show: false  // 显示网格
      },
      series: centerSeries
    });
    // 绘制图表
    window.onresize = function () {
      // 自适应大小
      centerChart.resize();
    };
  }, [seriesNationwide])

  return (
    <div className="carbonTradingScaleTrend-content">
      <div className="top-box">
        <div id="trendCenterChart"></div>
      </div>
    </div>
  )
};

export default connect()(carbonTradingScaleTrend);
